<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <%@include file="include/header.jsp" %>
    <title>用户维护</title>
    <style>
        .m-page {
            /* 设置文字不被选中 */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            /* 设置鼠标滑过样式变手 */
            cursor: pointer;
        }
    </style>
</head>

<body>

<%@include file="include/nav.jsp" %>

<div class="container-fluid">
    <div class="row">
        <%@include file="include/sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <%-- 查询条件表单 --%>
                    <form id="form" action="admin/get/page.html" class="form-inline" role="form" style="float:left;">
                        <input type="hidden" id="current" name="current"/>
                        <input type="hidden" id="adminIds" name="adminIds"/>
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件" name="query"
                                       value="${param.query}">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-warning">
                            <i class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <a type="button" class="btn btn-danger" style="float:right; margin-left:10px;" onclick="deleteBatch()">
                        <i class="glyphicon glyphicon-remove"></i> 删除
                    </a>
                    <a class="btn btn-primary" style="float:right;" href="admin/to/add/page.html">
                        <i class="glyphicon glyphicon-plus"></i> 新增
                    </a>
                    <br>
                    <hr style="clear:both;">
                    <%-- 表格渲染部分 --%>
                    <c:if test="${info.list.size() > 0}">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                    <%-- 表头 --%>
                                <thead>
                                <tr>
                                    <th width="35">#</th>
                                    <th width="30">
                                        <input type="checkbox" onclick="selectAll(this)"/>
                                    </th>
                                    <th>账号</th>
                                    <th>名称</th>
                                    <th>邮箱地址</th>
                                    <th width="100">操作</th>
                                </tr>
                                </thead>
                                    <%-- 表格体 --%>
                                <tbody>
                                <c:forEach items="${info.list}" var="item" varStatus="status">
                                    <tr>
                                        <td>${status.index+1}</td>
                                        <td>
                                            <input type="checkbox" name="id" value="${item.id}"/>
                                        </td>
                                        <td>${item.account}</td>
                                        <td>${item.username}</td>
                                        <td>${item.email}</td>
                                        <td>
                                                <%--  --%>
                                            <a href="assign/to/assign/role/page.html?id=${item.id}&current=${info.pageNum}&query=${param.query}"
                                               class="btn btn-success btn-xs">
                                                <i class=" glyphicon glyphicon-check"></i>
                                            </a>
                                            <a href="admin/to/edit/page.html?id=${item.id}"
                                               class="btn btn-primary btn-xs">
                                                <i class=" glyphicon glyphicon-pencil"></i>
                                            </a>
                                            <a href="admin/delete/${item.id}/${info.pageNum}/${param.query}.html"
                                               class="btn btn-danger btn-xs">
                                                <i class=" glyphicon glyphicon-remove"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                                    <%-- 分页插件 --%>
                                <tfoot>
                                <tr>
                                    <td colspan="6" align="center">
                                        <ul class="pagination m-page">
                                                <%-- 上一页 --%>
                                            <c:if test="${!info.hasPreviousPage}">
                                                <li class="disabled" onclick="goBack()"><a>上一页</a></li>
                                            </c:if>
                                            <c:if test="${info.hasPreviousPage}">
                                                <li onclick="goBack()"><a>上一页</a></li>
                                            </c:if>
                                                <%-- 循环遍历页码 --%>
                                            <c:forEach items="${info.navigatepageNums}" var="item">
                                                <c:if test="${info.pageNum != item}">
                                                    <li><a onclick="toPage(${item})">${item}</a></li>
                                                </c:if>
                                                <c:if test="${info.pageNum == item}">
                                                    <li class="active"><a onclick="toPage(${item})">${item}</a>
                                                    </li>
                                                </c:if>
                                            </c:forEach>
                                                <%-- 下一页 --%>
                                            <c:if test="${!info.hasNextPage}">
                                                <li class="disabled" onclick="goNext();"><a>下一页</a></li>
                                            </c:if>
                                            <c:if test="${info.hasNextPage}">
                                                <li onclick="goNext();"><a>下一页</a></li>
                                            </c:if>
                                        </ul>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </c:if>
                    <%-- 如果没有搜索到对应的数据就显示查询结果为空 --%>
                    <c:if test="${info.list.size() < 1}">
                        <div style="text-align: center">查询结果为空</div>
                    </c:if>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    /** 当前检索名称 */
    let query = "${param.query}";
    /** 当前页码(第几页) */
    let current = parseInt($(".pagination .active").text());
    /** 分页总页数 */
    let total = ${info.pages};

    /** 跳转到某一页 */
    function toPage(before) {
        $("#current").val(before);
        if (current !== before) {
            $("#form").prop("action", "admin/get/page.html").submit();
        }
    }

    /** 上一页 */
    function goBack() {
        $("#current").val(current - 1);
        if (current > 1) {
            $("#form").prop("action", "admin/get/page.html").submit();
        } else {
            layer.msg("不能再往前啦");
        }
    }

    /** 下一页 */
    function goNext() {
        $("#current").val(current + 1);
        if (current < total) {
            $("#form").prop("action", "admin/get/page.html").submit();
        } else {
            layer.msg("不能再往后啦");
        }
    }

    /** 全选/全不选 */
    function selectAll(event) {
        $("tbody input[name=id]").prop("checked", $(event).prop("checked"))
    }

    /** 批量删除 */
    function deleteBatch() {
        // 拼接选择的id
        let adminIds = "";
        $.each($("tbody input[name=id]:checked"), function () {
            adminIds += this.value + ",";
        });
        // 进行选中数量的判断，如果为空就打回去，不为空就删除末尾逗号
        let len = adminIds.length;
        if (len === 0) {
            layer.msg("请至少选择一个进行删除");
            return;
        } else {
            adminIds = adminIds.substring(0, adminIds.length - 1);
        }
        // 执行删除
        $("#adminIds").val(adminIds);
        $("#current").val(current);
        $("#form")
            .prop("action", "admin/deleteBatch.html")
            .prop("method", "POST")
            .submit();
    }
</script>
</body>
</html>